<template>
	<view class="userChat">
		<view class="header">
			<text>小姐姐</text>
		</view>
		<u-line></u-line>
		<view class="container">
			<view class="message_view" v-for="item in MessageList" :key="item.id">
				<view class="myself" v-if="item.type === 'personage'">
					<view style="width: 15%;">
						<image :src="item.buddha" style="width: 50px;height: 50px;"></image>
					</view>
					<view style="width: auto;padding: 20rpx;background-color: #509db5;"
						v-if="item.messageType === 'text'">
						{{ item.message }}
					</view>
					<view v-else>
						<view style="width: auto;padding: 20rpx;background-color: #509db5;">
							<image :src="item.message" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view v-else class="friend">
					<view style="width: 15%;">
						<image :src="item.buddha" style="width: 50px;height: 50px;"></image>
					</view>
					<view style="width: auto; padding: 20rpx; background-color: #f6f6f6;"
						v-if="item.messageType === 'text'">
						{{ item.message }}55
					</view>
					<view v-else>
						<image :src="item.message" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_chat">
			<image style="width: 60rpx;" src="/static/语音.png" mode="widthFix"></image>
			<view style="width: 70%;height: 100%;">
				<u-input placeholder="后置插槽" v-model="message">
					<template slot="suffix">
						<u-button :text="tips" type="primary" size="mini" @click="sendMessage"></u-button>
					</template>
				</u-input>
			</view>
			<view style="display: flex;">
				<image style="width: 55rpx;margin: 5rpx;" src="../../static/表情.png" mode="widthFix"></image>
				<!-- <uni-file-picker v-model="ImageMessage" file-mediatype="all"> -->
					<image style="width: 55rpx;margin: 5rpx;" src="../../static/图片.png" mode="widthFix"></image>
				<!-- </uni-file-picker> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: '',
				tips: '发送',
				MessageList: [],
				ImageMessage: ''
			};
		},
		methods: {
			sendMessage() {
				const data = {
					id: (this.MessageList.length + 1),
					type: 'personage',
					message: this.message,
					messageType: 'text',
					buddha: 'https://img0.baidu.com/it/u=610793696,3295104457&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
				}
				this.MessageList.push(data)
				setTimeout(() => {
					const data = {
						id: (this.MessageList.length + 1),
						type: 'friend',
						message: 'Hello 新朋友',
						messageType: 'text',
						buddha: 'https://ww3.sinaimg.cn/mw690/005ZHxhwgy1hr1n7lyyjlj30u00u0q6f.jpg'
					}
					console.log(data)
					this.MessageList.push(data)
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userChat {
		position: relative;
		width: 100%;
		height: 100vh;

		.header {
			width: 100%;
			height: 100rpx;
			margin: -25rpx 0 10rpx 0;
			text-align: center;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 40rpx;
		}

		.container {
			width: 100%;
			height: 75%;
			overflow: auto;

			.message_view {
				position: relative;
				width: 100%;
				height: auto;
				margin: 50rpx;

				.myself {
					width: 90%;
					text-align: right;
					display: flex;
					flex-direction: row-reverse
				}

				.friend {
					width: 90%;
					text-align: left;
					display: flex;
				}
			}
		}

		.bottom_chat {
			position: absolute;
			width: 100%;
			height: 100rpx;
			padding: 30rpx;
			line-height: 100rpx;
			display: flex;
			bottom: 0;
		}
	}
</style>